{% extends "base.html" %}
{% block title %}{{ siteName }} - Preferences{% endblock %}
{% block page_specific_header_stuff %}
	<style type="text/css">
		td.preference_page_left_column {
			width: 114px;
			padding-left: 3px;
		}
	</style>
{% endblock %}
{% block content %}
<div></div>
<form action='/preferences' method='POST' id='prefform' style='-moz-border-radius: 4px; border: 1px solid #ccc; margin-top:10px'>
	<table id='prefform_table' style='width:100%'>
		<tr>
			<td colspan=3 class="prefform">
				Basic Settings:
			</td>
		</tr>
		<tr>
			<td class="preference_page_left_column">Name:</td>
			<td><input type=text name='displayName' id='displayName' class='inputfield' value='{{name|safe}}'></td>
			<td></td>
		</tr>
		<tr>
			<td class="preference_page_left_column">Display tag column:</td>
			<td>
				<input type="radio" name="displayTagColumn" value="Y" {{displayTagColumn_yes|safe}}/>Yes 
				<input type="radio" name="displayTagColumn" value="N" {{displayTagColumn_no|safe}}/>No
			</td>
			<td id="displayTagColumn_explanation">
			</td>
		</tr>
		<tr>
			<td class="preference_page_left_column">Orientation:</td>
			<td>
				<input type="radio" name="orientation" value="side-by-side" {{orientation_side_by_side|safe}}/>Side by side
				<input type="radio" name="orientation" value="question-above-answer" {{orientation_question_above_answer|safe}}/>Question above answer
			</td>
			<td id="orientation_explanation"></td>
		</tr>
	</table>
</form>
<form action='/preferences' method='POST' id='prefform' style='-moz-border-radius: 4px; border: 1px solid #ccc; margin-top:10px'>
	<table style='width:100%'>
		<tr>
			<td colspan=3 class="prefform">
				Show your support for {{siteName}}:
			</td>
		</tr>
		<tr>
			<td colspan=3>
				<div style='width: 600px'>
					We believe that advertising, when done right, can be useful and non-obtrusive.  We do not display advertisement in our application (interfere with your studying).  At this point, we do not send out any advertisement, but we plan to send you advertisements (coupons) from our sponsors once a week or before each holiday.
				</div>
			</td>
		</tr>
		<tr>
			<td class="preference_page_left_column">Allow advertising:</td>
			<td>
				<input type="radio" name="allow_advertising" value="Y" {{allow_advertising_yes|safe}}/>Yes 
				<input type="radio" name="allow_advertising" value="N" {{allow_advertising_no|safe}}/>No
			</td>
			<td id="allow_advertising_explanation">
			</td>
		</tr>
		<tr>
			<td class="preference_page_left_column">Gender:</td>
			<td>
				<input type="radio" name="gender" value="Male" {{gender_male|safe}}/>Male 
				<input type="radio" name="gender" value="Female" {{gender_female|safe}}/>Female
			</td>
			<td id="gender_explanation">
			</td>
		</tr>
		<tr>
			<td class="preference_page_left_column">Birth year:</td>
			<td>
				<select name="birth_year" id="birth_year">
					{{birthYearOptions|safe}}
				</select>
			</td>
			<td id="birth_year_explanation"></td>
		</tr>
		<tr>
			<td colspan=3>
				<div style='width: 600px'>
					To show your support for {{siteName}}, you can also make a <a href='javascript:void(0);' onclick='alert("We forgot to setup donation.  Please use the Feedback link in the footer of the page to contact us.");'>donation</a>.
				</div>
			</td>
		</tr>
	</table>
</form>
<form action='/preferences' method='POST' id='prefform' style='-moz-border-radius: 4px; border: 1px solid #ccc; margin-top:10px'>
	<table style='width:100%'>
		<tr>
			<td colspan=3 class="prefform">
				Setting for the plugin or the stand-alone application
			</td>
		</tr>
		<tr>
			<td class="preference_page_left_column">Password:</td>
			<td><input type="password" name="password" id="pluginPassword" value=""/></td>
			<td id="password_explanation"></td>
		</tr>
		<tr>
			<td colspan="3" style='padding-left:3px'>
				<!--
				How does the logic for Location work?
				Everytime the plugin start, it should automatically log into the system.
				The plugin also store the name of the location.
				When the plugin log into the system, the name of the location is also
				sent to the server.
				-->
				<div>
					<select id="location_select" style="{{location_display|safe}}">
						<option value="">Select a location you want to edit</option>
						{{location_dropdown|safe}}
					</select>
					<span class='button' id='add_location_btn'>Add location</span>
					<div id="location_content" style="display:none">
						<div id="location_decks_message">
						</div>
						<div id="location_decks">
						</div>
						<div>
							<span class='button' id='save_location_settings_btn'>Save settings for selected location</span>
							<span class='button' id='delete_location_btn'>Delete location</span>
						</div>
					</div>
				</div>
			</td>
		</tr>
	</table>
</form>
<div style='margin-top:10px; padding-left: 2px'>
	<span class='button' id='submit'>Submit</span>
</div>
{% endblock %}
